<template>
  <view class="containner">
    <u-navbar
      height="50"
      :title="status == 1 ? '商家发货' : '填写退货物流'"
      title-size="36"
      back-icon-color="#333"
      title-color="#333"
    ></u-navbar>
    <view class="from">
      <u-cell-group>
        <u-cell-item
          @click="show = !show"
          title="物流方式"
          :value="typeEleven ? typeEleven.name : '请选择'"
        ></u-cell-item>
      </u-cell-group>
      <u-cell-group>
        <u-cell-item v-if="typeEleven.name == '私下协商'" title="说明" :arrow="false">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 70%">
              由于平台存在体积或重量超大商品，选择私下协商时，由卖家和买家沟通物流方式
            </view>
          </view>
        </u-cell-item>
        <u-cell-item v-else title="物流编号" :arrow="false">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 50%" class="text_right">
              <input
                v-model="form.logisticsNo"
                placeholder="请填写物流编号"
                :clearable="false"
                :inputBorder="false"
              />
            </view>
          </view>
        </u-cell-item>
      </u-cell-group>

      <!-- <view class="info-view">
			<view style="">
				退货说明
			</view>
			<textarea class="text-area" v-model="form.return_instructions" placeholder="选填,请详细填写退货说明" name="" id="" cols="30" rows="10"></textarea>

		</view> -->
    </view>
    <!-- <view class="item-view">
		联系电话 &nbsp;&nbsp;&nbsp;&nbsp;1891234578
	</view> -->

    <view v-if="status == 2" class="item-view">
      <view class=""> 上传凭证（最多三张） </view>
      <u-upload ref="uUpload" :action="uploadURL"></u-upload>
    </view>

    <view class="submit_the_module">
      <view @click="submit">确认提交</view>
    </view>
    <u-picker
      @confirm="confirm"
      :range="ranges"
      mode="selector"
      range-key="name"
      v-model="show"
    ></u-picker>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
import { BASE_URL, UP_URL } from '@/common/config.js'
export default {
  data() {
    return {
      show: false,
      status: 1,
      ranges: [],
      typeEleven: '',
      order_id: '',
      uploadURL: BASE_URL + UP_URL,
      form: {
        id: '',
        logisticsId: '',
        logisticsNo: ''
      }
    }
  },
  onLoad(e) {
    this.form.id = e.id
    this.status = e.status

    this.$u.get('/app-api/trade/delivery/express/list').then((res) => {
      this.ranges = res.data
    })
  },

  methods: {
    confirm(row) {
      this.typeEleven = this.ranges[row]
      this.form.logisticsId = this.ranges[row].id
    },

    selectAFunction(value) {
      this.show = true
    },
    submit() {
      if (!this.typeEleven && this.status == 2) {
        this.$refs.uToast.show({
          title: '申请退款类型不能为空'
        })
        return
      }
      if (!this.form.logisticsId) {
        this.$refs.uToast.show({
          title: '快递方式不能为空'
        })
        return
      }

      if (this.typeEleven.name != '私下协商') {
        if (!this.form.logisticsNo) {
          this.$refs.uToast.show({
            title: '物流编号不能为空'
          })
          return
        }
      }

      if (this.status == 1) {
        this.$u.put('/app-api/trade/order/delivery', this.form).then((res) => {
          this.$u.toast('成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 800)
        })
        return
      }
      this.$u.put('/app-api/trade/after-sale/delivery', this.form).then((res) => {
        this.$u.toast('成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 800)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.submit_the_module {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  margin-top: 380rpx;
  view {
    width: 96%;
    border-radius: 40rpx;
    padding: 20rpx 0rpx;
    background-color: #0f76bc;
    color: #f1f1f1;
    font-size: 30rpx;
    text-align: center;
  }
}

.from {
  padding: 20rpx;
}

.info-view {
  background-color: #fff;
  font-size: 28rpx;
  color: #606266;
  padding: 28rpx;
}
.containner {
  background-color: #f6f8f9;
  min-height: 100vh;
}
.tips {
  background-color: #f1f6ff;
  padding: 10upx 20upx;
  font-size: 22upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #4286f4;
  line-height: 32upx;
}
.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;

  .agreement-text {
    display: flex;
    padding-left: 8rpx;
    color: $u-tips-color;
    text {
      color: #2d93fd;
    }
  }
}
.item-view {
  padding: 20rpx 40rpx;
  font-size: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}
.text-area {
  height: 120rpx;
}
</style>
